<template>
     <el-row class="el-bank-row" :gutter="2">
        <el-col :span="13" :offset="2" >
            <el-space direction="vertical" fill>
                <n-carousel show-arrow style="border-radius: 8px;">
                    <img
                    class="carousel-img"
                    src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
                    >
                    <img
                    class="carousel-img"
                    src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
                    >
                    <img
                    class="carousel-img"
                    src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
                    >
                    <img
                    class="carousel-img"
                    src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
                    >
                </n-carousel>
                <el-divider direction="horizontal"></el-divider>
                <categoryVue/>
                <tableItem/>
                <el-divider />
                <div class="example-pagination-block">
                    <el-pagination layout="prev, pager, next" :total="1000" />
                </div>

            </el-space>
        </el-col>
        <el-col :span="7" :offset="1">
            <el-space direction="vertical" fill>
                <el-card class="el-card-calendar">
                    <el-calendar>
                        <template #date-cell="{ data }">
                        <p :class="data.isSelected ? 'is-selected' : ''">
                            {{ data.day.split('-').slice(2).join('-') }}
                            {{ data.isSelected ? '.' : '' }}
                        </p>
                        </template>
                    </el-calendar>
                </el-card>
                <double/>
            </el-space>
        </el-col>
    </el-row>
  
</template>

<script lang="ts" setup>
import categoryVue from "@/components/itemBank/category.vue";
import tableItem from"@/components/itemBank/tableItem.vue";
import double from '@/components/itemBank/double.vue'

</script>

<style >
    .el-bank-row{
       min-height: 500px;
    }

    .carousel-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    }
    .el-card-calendar {
        border-radius: 8px;
       
    }
    .el-calendar-table .el-calendar-day{
        height: 50px;
        width: 50px;
        text-align: center;
       
  }

</style>